import { defineStore } from 'pinia'
import { ref } from 'vue'
import { useAuthStore } from './auth'
export const useThemeStore = defineStore(
  'theme',
  () => {
    const authStore = useAuthStore()
    const theme = ref(authStore.user?.theme || 'dark')

    // 切换主题
    const setTheme = (newTheme) => {
      theme.value = newTheme
      localStorage.setItem('theme', newTheme)
      applyTheme(newTheme)
    }

    // 应用主题
    const applyTheme = (currentTheme) => {
      const html = document.documentElement
      const isDark = currentTheme === 'dark'

      // 移除其他主题类
      html.classList.remove('light', 'dark')
      // 添加当前主题类
      html.classList.add(currentTheme)

      // 设置CSS变量
      if (isDark) {
        // 基础主题色
        html.style.setProperty('--color-background', '#1a1a1a')
        html.style.setProperty('--color-background-soft', '#242424')
        html.style.setProperty('--color-background-mute', '#2f2f2f')
        html.style.setProperty('--color-text', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--color-text-soft', '#a8a8a8')

        // 菜单相关
        html.style.setProperty('--menu-hover-bg', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--menu-active-bg', '#a855f74d')

        // Dialog 相关
        html.style.setProperty('--el-bg-color', '#1a1a1a')
        html.style.setProperty('--el-bg-color-overlay', '#242424')
        html.style.setProperty('--el-text-color-primary', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--el-text-color-regular', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--el-border-color-lighter', '#333333')
        html.style.setProperty('--el-fill-color-light', '#2f2f2f')
        html.style.setProperty('--el-mask-color', 'rgba(0, 0, 0, 0.7)')
        html.style.setProperty('--menu-text-color', '#18181B')
        html.style.setProperty('--menu-text-hover-color', '#18181B')

        // 按钮相关
        html.style.setProperty('--el-button-hover-bg-color', '#374151')
        html.style.setProperty('--el-button-hover-text-color', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--el-button-cancel-hover-color', 'rgb(41 41 41 / 1)')
        html.style.setProperty('--el-button-cancel-hover-text-color', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--el-button-save-hover-color', 'rgb(168 85 247 / 1)')
        html.style.setProperty('--el-button-save-hover-text-color', '#18181B')
        html.style.setProperty('--el-button-save-text-color', 'rgb(229 231 235 / 1)')
        // 输入框相关

        html.style.setProperty('--el-input-bg-color', '#242424')
        html.style.setProperty('--el-input-border-color', '#333333')
        html.style.setProperty('--el-input-hover-border-color', '#4B5563')
        html.style.setProperty('--el-input-focus-border-color', '#6B7280')

        // textarea
        html.style.setProperty('--el-textarea-bg-color', '#292a2d')
        html.style.setProperty('--el-textarea-color', 'rgb(245 245 245)')

        // 问答相关
        html.style.setProperty('--el-answer-bg-color', '#414158')
      } else {
        // 基础主题色
        html.style.setProperty('--color-background', '#ffffff')
        html.style.setProperty('--color-background-soft', '#f9f9f9')
        html.style.setProperty('--color-background-mute', '#f1f1f1')
        html.style.setProperty('--color-text', '#18181B')
        html.style.setProperty('--color-text-soft', '#666666')

        // 菜单相关
        html.style.setProperty('--menu-hover-bg', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--menu-active-bg', '#a855f74d')

        // Dialog 相关
        html.style.setProperty('--el-bg-color', '#ffffff')
        html.style.setProperty('--el-bg-color-overlay', '#ffffff')
        html.style.setProperty('--el-text-color-primary', '#18181B')
        html.style.setProperty('--el-text-color-regular', '#18181B')
        html.style.setProperty('--el-border-color-lighter', '#e4e4e4')
        html.style.setProperty('--el-fill-color-light', '#f5f7fa')
        html.style.setProperty('--el-mask-color', 'rgba(0, 0, 0, 0.5)')
        html.style.setProperty('--menu-text-color', 'rgb(229 231 235 / 1)')
        html.style.setProperty('--menu-text-hover-color', '#18181B')

        // 按钮相关
        html.style.setProperty('--el-button-hover-bg-color', '#f3f4f6')
        html.style.setProperty('--el-button-hover-text-color', '#18181B')

        html.style.setProperty('--el-button-cancel-hover-color', '#f5f7fa')
        html.style.setProperty('--el-button-cancel-hover-text-color', '#18181B')
        html.style.setProperty('--el-button-save-hover-color', '#f5f7fa')
        html.style.setProperty('--el-button-save-hover-text-color', '#18181B')
        html.style.setProperty('--el-button-save-text-color', '#18181B')


        // 输入框相关
        html.style.setProperty('--el-input-bg-color', '#ffffff')
        html.style.setProperty('--el-input-border-color', '#dcdfe6')
        html.style.setProperty('--el-input-hover-border-color', '#c0c4cc')
        html.style.setProperty('--el-input-focus-border-color', '#409eff')

        // textarea
        html.style.setProperty('--el-textarea-bg-color', '243 244 246')
        html.style.setProperty('--el-textarea-color', '#18181B')

        // 问答相关
        html.style.setProperty('--el-answer-bg-color', '#eff6ff')
      }
    }

    // 初始化主题
    const initTheme = () => {
      const savedTheme = localStorage.getItem('theme')
      if (!savedTheme) {
        // 首次登录，默认使用浅色主题
        setTheme('light')
      } else {
        // 使用保存的主题
        applyTheme(savedTheme)
      }
    }

    return {
      theme,
      setTheme,
      initTheme
    }
  },
  {
    persist: true
  }
)
